﻿<div class="product-title">Shopping Cart</div>
<p data-bind="visible: items().length == 0">
    Your cart is empty
</p>
<table data-bind="visible: items().length > 0">
    <thead>
        <tr>
            <th>Item Description</th>
            <th>Remove</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td class="description">
                <a data-bind="href: $parent.getProductUrl($data), text: title"></a>
            </td>
            <td class="action">
                <a href="javascript:void(0)" data-bind="click: $parent.deleteItem">Remove</a>
            </td>
            <td class="action">
                <span class="currency">$</span><span class="value" data-bind="text: itemPrice"></span>
            </td>
            <td class="action">
                <input type="text" data-bind="integerValue: count" class="cart-count"/>
            </td>
            <td class="action">
                <span class="currency">$</span><span class="value" data-bind="text: priceStr"></span>
            </td>
        </tr>
    </tbody>
</table>
<a href="javascript:void(0)" class="button checkout" data-bind="click: checkout, visible: items().length > 0">Checkout</a>

<div style="clear:both;" data-bind="with: recommendedProducts">
    @Html.Partial("RecommendedProducts")
</div>